<template>
  <div class="page J-gasstation-show">
    <div class="item-cell line-bottom">
      <div class="weui-cell__hd" style="position: relative;margin-right: 15px;">
        <img src="/static/images/58cfaf5e2b861.png" style="width: 60px;display: block">
      </div>
      <div class="weui-cell__bd">
        <div class="name">{{getGassInfo.gsName}}</div>
        <rate v-model="getGassInfo.syntheticalLevel"
              disabled
              show-text
              :colors="['#28be58', '#28be58', '#28be58']"
              text-color="#28be58"
              text-template="{value}"></rate>
      </div>
      <div  style="position: relative;margin-left:15px;">
        <router-link :to="'/inlet?id='+getGassInfo.id" class="weui-pay-btn">立即付款</router-link>
      </div>
    </div>
    <div class="item-cell line-bottom">
      <div class="weui-cell__bd">
        <div class="pos"><i class="j-icon-pos"></i>{{getGassInfo.gsAddress}}</div>
      </div>
      <div class="weui-cell__hd" style="position: relative;margin-left:15px;">
        <span @click="gothis" class="weui-map-btn" v-if="getGassInfo.gsLatitude && this.getGassInfo.gsLongitude">去这里</span>
      </div>
    </div>
    <swiper direction="horizontal" :pagination-visible="true" :pagination-clickable="true"  :length="getGassvInfo.length">
      <div class="swiper-page" v-for="item,index in getGassvInfo">
        <div class="weui-flex pl">
          <div class="weui-flex__item line-bottom line-top">
            <span class="name" style="margin-top:10px; width:120px;font-size:18px">{{item.gasNoName}}</span>
          </div>
          <div class="weui-flex__item pl">
            <span class="name line-left">
              市场价<span class="_n color-1">{{item.salePrice}}</span></span>
          </div>
          <div class="weui-flex__item pl">
            <span class="name line-left">
              挂牌价<span class="_n color-1">{{item.discountPrice}}</span></span>
          </div>
          <div class="weui-flex__item pl">
            <span class="name line-left">
              会员价<span class="_n color-1">{{item.vipPrice}}</span></span>
          </div>
        </div>
      </div>
    </swiper>
  </div>
</template>
<script>
  const config = require('~src/config')
  import Swiper from '~components/mixins/swiper.vue'
  import { mapGetters } from 'vuex'
  import GetData from '~components/mixins/getData.vue'
  import rate from '~components/mixins/rate.vue'
  const util = require('~src/lib/util')
  export default {
    name: 'el',
    data () {
      return {
        URL: config._API_,
        avatar: config._URL_ + '/static/images/avatar.png',
        value5: 3.7
      }
    },
    computed: {
      ...mapGetters({
        getGassInfo: 'getGassInfo',
        getGassvInfo: 'getGassvInfo'
      })
    },
    components: {
      GetData,
      Swiper,
      rate
    },
    mounted () {
      var _this = this
      if (_this.getGassInfo) {
        _this.$store.dispatch('getGassInfo',this.$route.query.id)
  }
  },
    methods: {
      gothis() {
        var href = 'http://api.map.baidu.com/marker?location='+ this.getGassInfo.gsLatitude+','+
          this.getGassInfo.gsLongitude+'&title='+this.getGassInfo.gsName+'&content='+this.getGassInfo.gsArea+this.getGassInfo.gsStreet+'&output=html'
        location.href = href
      }
    }
  }
</script>
<style lang="scss">
  .J-gasstation-show{
    .weui-pay-btn{
      background-color:#d5b01a;
      color:#fff;
      font-size:14px;
      text-align: center;
      width:85px;
      height:40px;
      line-height:40px;
      font-size:14px;
      display: block;
      border-radius:5px;
      -weikit-border-radius:5px;
    }
    .swiper-page{
      .weui-flex{
        background-color:#fff;
        .name{
          display: block;
          padding:8px 0;
          text-align: center;
          color:#333;
          font-size:14px;
          ._n{
            font-size:16px;
            display: block;
          }
        }
      }
    }
    .swiper{
      padding-bottom:18px;
      margin-top:10px;
      &:after{
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        bottom:17px;
        height: 1px;
        border-bottom: 1px solid #d9d9d9;
        color: #d9d9d9;
        transform-origin: 0 0;
        transform: scaleY(0.5);
      }
      .wp{
        background-color:#fff;
      &:before{
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        top:0px;
        height: 1px;
        border-bottom: 1px solid #d9d9d9;
        color: #d9d9d9;
        transform-origin: 0 0;
        transform: scaleY(0.5);
      }
      }
      .swiper-page{
        &:before{
          content: " ";
          position: absolute;
          left: 0;
          right: 0;
          top:0;
          height: 1px;
          border-bottom: 1px solid #d9d9d9;
          color: #d9d9d9;
          transform-origin: 0 0;
          transform: scaleY(0.5);
        }
      }
    }
    .swiper.horizontal .swiper-pagination{
      bottom:-5px
    }
    .swiper .swiper-pagination .swiper-pagination-bullet.active{
      background-color: #0bb20c;
    }
    .item-cell{
      background-color:#fff;
      padding: 10px 15px;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      .pos{
        font-size:14px;
        color:#666;
        .j-icon-pos:before{
          font-size:16px;
        }
      }
      .weui-map-btn{
        background-color:#59bc11;
        color:#fff;
        font-size:14px;
        text-align: center;
        width:65px;
        height:30px;
        line-height:30px;
        font-size:13px;
        display: block;
        border-radius:5px;
        -weikit-border-radius:5px;
      }
    }
    .weui-cell__hd{
      img{
        border-radius: 50%;
        -webkit-border-radius: 50%;
        border:1px solid #eee;
      }
    }
    .weui-cell:before{
      left:0
    }
  }
</style>
